<template>
    <div class="charts">
        <v-chart :option="Columnar()"></v-chart>
    </div>
</template>

<script setup lang="ts">
const Columnar = () => {
    return {
        xAxis: {
            show: false,
            // 两侧空白
            // boundaryGap: false,
            // 均匀分布
            type: 'category',
        },
        yAxis: {
            show: false
        },
        series: [
            {
                type: 'bar',
                data: props.data,
                // 显示数值
                label: {
                    show: false,
                    position: 'insideTop',
                    color: 'white'
                },
                // 延迟动画时间
                animationDelay: function (idx) {
                    return idx * 100
                },
            }

        ],
        grid: {
            // 距离左侧,下同
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            show: true,
            //图标底层的颜色
            backgroundColor: {
                // 线性渐变
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "yellow", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "aqua", // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
        },
        tooltip: {
            trigger: 'axis',
            // 标线和刻度文本
            axisPointer: {
                // 十字准星指示器
                type: "cross",
            },
            position: function (point, params, dom, rect, size) {
                // 固定在顶部
                return [point[0], "5%"];
            },
        },
    };
}

let props = defineProps(['data'])
</script>

<style scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>